import React, { useState, useEffect } from 'react'
import { Button, Tag, Modal, Form, Table, Card, Input, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import OperaPrompt from '../../../components/OperaPrompt'
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import SaveView from './save'
const { Search } = Input;
const { confirm } = Modal
export default () => {

    const [visable, setVisable] = useState(false)
    const [tableData, setTableData] = useState({ list: [], pagination: { total: 0, current: 1 } })
    const [id, setId] = useState(0)


    const [saveForm] = Form.useForm()
    const columns: any = [
        {
            title: '主营行业',
            dataIndex: 'title',
        },
        {
            title: '保证金(元)',
            render: (text: any) => <Tag color="cyan">{text} </Tag>,
            align: "center",
            dataIndex: 'deposit',
        },
        {
            title: '排序',
            render: (text: any) => <Tag color="green">{text} </Tag>,
            dataIndex: 'sort',
            align: "center",
        },
        {
            title: '操作',
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }} onClick={() => {
                        setVisable(true)
                        setId(record.id)
                        request(`/store/industry/${record.id}`).then((result) => {
                            const data = result.data
                            saveForm.setFieldsValue(data)
                        })
                    }}>编辑</Button>
                    <Button size="small" danger onClick={() => {
                        destroy([record.id])
                    }}>删除</Button>
                </>
            ),
        },
    ];

    const getList = (params: any = {}) => {
        request(`/store/industry-list`, { params: { pageSize: params.pageSize ?? 10, ...params } }).then((result) => {
            setTableData({ list: result.data, pagination: { total: result.total, current: params.current ?? tableData.pagination.current } })
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/store/industry-destroy`, {
                    method: "Delete",
                    params: { ids }
                }).then((result) => {
                    message.success("删除成功", 1, () => getList())
                })
            }
        });
    }
    useEffect(() => {
        getList()
    }, [])

    const closeModal = () => {
        setVisable(false)
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <OperaPrompt dataList={[
                    "店铺分类是指店铺的主营行业分类，前台会根据店铺的主营分类进行筛选",
                    "不同店铺分类的保证金不同，会员申请入驻需要根据店铺分类缴纳相应的保证金"
                ]} />
                <div style={{ padding: "10px 0" }}>
                    <Search
                        placeholder="请输入主营行业"
                        onSearch={value => getList({ title: value })}
                        style={{ width: 400, marginRight: "5px" }}
                        enterButton={<Button type="primary"><SearchOutlined /></Button>}
                    />
                    <Button onClick={() => {
                        setVisable(true)
                        setId(0)
                        saveForm.resetFields()
                    }}>添加</Button>
                </div>

                <Table
                    rowKey="id"
                    dataSource={tableData.list}
                    columns={columns}
                    pagination={{ total: tableData.pagination.total, pageSize: 10, current: tableData.pagination.current }}
                    onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
                        getList({ current: pagination.current, pageSize: pagination.pageSize })
                    }}
                />
                <Modal
                    width="600px"
                    title={id > 0 ? "修改" : "添加"}
                    visible={visable}
                    onOk={() => saveForm.submit()}
                    onCancel={closeModal}
                    getContainer={false}
                >
                    <SaveView saveForm={saveForm} id={id} getList={getList} close={closeModal} />
                </Modal>
            </Card>
        </PageHeaderWrapper>

    )
}